<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>canvas移动小球</title>
        <style>
            canvas{
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas height="600px" width="600px" class="canvas"></canvas>
    </body>
    <script>
        let  canvas = document.querySelector('canvas')
        let ctx =canvas.getContext('2d')
        // ctx.beginPath();
        // // ctx.moveTo(300,200);
        // ctx.arc(200,200,100,1,7,false)
        // // ctx.lineTo(300,400)
        // // ctx.lineTo(100,50)
        // // ctx.closePath()

        // // ctx.fillStyle='green'
        // // ctx.fill()

        // ctx.strokeStyle='skyblue'
        // ctx.stroke()
        var ballArr =[]

        function Ball(x,y,r){
            console.log('触发');
            this.x = x
            this.y = y
            this.r = r
            this.color = getCOlor()
            this.dx = parseInt(Math.random()*10-5)
            this.dy = parseInt(Math.random()*10-5)
            ballArr.push(this)
            // console.log(ballArr);
        }
        Ball.prototype.render =function(){
            ctx.beginPath()
            ctx.arc(this.x,this.y,this.r,0,7,false)
            // console.log(this.x,this.y,this.r,this.color);
            ctx.fillStyle = this.color;
            ctx.fill()
        }
        Ball.prototype.upData= function (){
            this.x +=this.dx
            this.y +=this.dy
            console.log(this.x ,this.y);
            this.r-=0.1
            if(this.r<=0){
                this.r=0
                ballArr = ballArr.filter((item)=>{
                   return item!=this
                })
            }
        }
        canvas.addEventListener('mousemove',(e)=>{
            new Ball(e.offsetX,e.offsetY,30)
        })
        setInterval(()=>{
            ctx.clearRect&&ctx.clearRect(0,0,canvas.width,canvas.height)
            ballArr&&ballArr.forEach((item)=>{
                item.upData()
                item.render()
            })
        },10)
        function getCOlor(){
            var color = '#'
            var allType ='0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f';
            var allTypeArr = allType.split(',')
            for (let i=0 ; i<6 ;i++){
             var random = parseInt(Math.random()*allTypeArr.length)
                 color+=allTypeArr[random]
                
            }
            return color
        }
       let color = getCOlor()
       console.log(color);
    </script>
</html>